<template>
    <div>
        <VoSchemaForm ref="sf" :model="form" :schema="schema" :rules="rules">
            <template v-slot:rulesSystem>
                <div class="rulessystem">
                    <el-checkbox-group
                        v-model="form.rulesSystem"
                        size="mini"
                        @change="rulesSystemChange"
                    >
                        <el-checkbox label="0" border>系统编码</el-checkbox>
                        <el-checkbox label="2" border>常量编码</el-checkbox>
                    </el-checkbox-group>

                    <div
                        class="rulessystemcode"
                        v-if="form.rulesSystem.length !== 0"
                    >
                        <el-carousel
                            trigger="click"
                            height="85px"
                            indicator-position="outside"
                            :autoplay="false"
                        >
                            <el-carousel-item
                                v-for="(item, i) in result"
                                :key="i"
                                :class="{ undraggable: item.flag }"
                            >
                                <el-row :gutter="20">
                                    <vab-draggable
                                        :list="item"
                                        :options="{
                                            group: {
                                                name: falgs,
                                                pull: 'clone',
                                            },
                                            filter: '.undraggable',
                                            sort: false,
                                        }"
                                        @end="end"
                                        class="dragArea"
                                    >
                                        <el-col
                                            :span="4"
                                            v-for="(v, index) in item"
                                            :key="index"
                                        >
                                            <el-tooltip
                                                class="item"
                                                effect="dark"
                                                :content="v.name"
                                                placement="top"
                                                :open-delay="550"
                                            >
                                                <div class="codingregion">
                                                    {{ v.name }}
                                                </div>
                                            </el-tooltip>
                                        </el-col>
                                    </vab-draggable>
                                </el-row>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
            </template>
            <template v-slot:rulePlaceholder>
                <div class="bottomregions">
                    <el-row :gutter="20">
                        <vab-draggable
                            :list="list1"
                            :options="{ group: 'article', disabled: disabled }"
                            @start="start22"
                            @end="end22"
                            class="dragArea11"
                            style="height: 80px"
                        >
                            <el-col
                                :span="4"
                                v-for="(v, index) in list1"
                                :key="index"
                            >
                                <el-tooltip
                                    class="item"
                                    effect="dark"
                                    :content="v.name"
                                    placement="top"
                                    :open-delay="550"
                                >
                                    <div style="position: relative">
                                        <div
                                            class="codingregion2"
                                            @click="nameClick(v, index)"
                                            :class="{
                                                is_active: nowIndex === index,
                                            }"
                                        >
                                            {{ v.name }}
                                        </div>
                                        <i
                                            class="el-icon-remove-outline"
                                            @click="handleDel(index, v)"
                                        ></i>
                                    </div>
                                </el-tooltip>
                            </el-col>
                        </vab-draggable>
                    </el-row>
                    <div
                        class="datafielddetails"
                        v-if="currentItem && currentItem.id"
                    >
                        <p>{{ currentItem.name }}</p>

                        <!-- 系统类型是业务的则是数组 -->
                        <div v-if="currentItem.ruleParam.length">
                            <div
                                class="currentdetails"
                                v-if="currentItem.ruleType === '2'"
                            >
                                {{ currentItem.ruleValue }}
                            </div>

                            <div
                                class="currentdetails"
                                v-for="(item, index) in currentItem.ruleParam"
                                :key="index"
                            >
                                <el-form-item
                                    label="编码长度"
                                    v-if="
                                        typeof item.size == 'number'
                                            ? true
                                            : false
                                    "
                                >
                                    <el-input-number
                                        v-model="item.size"
                                        controls-position="right"
                                        :min="1"
                                    ></el-input-number>
                                </el-form-item>
                                <el-form-item
                                    label="填充值"
                                    v-if="
                                        typeof item.fill == 'string'
                                            ? true
                                            : false
                                    "
                                >
                                    <el-select
                                        v-model="item.fill"
                                        placeholder="请选择"
                                        clearable
                                    >
                                        <el-option
                                            label="0"
                                            value="0"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item
                                    label="流水号自增"
                                    v-if="
                                        typeof item.step == 'number'
                                            ? true
                                            : false
                                    "
                                >
                                    <el-input-number
                                        v-model="item.step"
                                        controls-position="right"
                                        :min="1"
                                    ></el-input-number>
                                </el-form-item>
                                <el-form-item
                                    label="最大值"
                                    v-if="
                                        typeof item.max == 'number'
                                            ? true
                                            : false
                                    "
                                >
                                    <el-input-number
                                        v-model="item.max"
                                        controls-position="right"
                                        :min="1"
                                    ></el-input-number>
                                </el-form-item>
                                <el-form-item
                                    label="最小值"
                                    v-if="
                                        typeof item.min == 'number'
                                            ? true
                                            : false
                                    "
                                >
                                    <el-input-number
                                        v-model="item.min"
                                        :min="1"
                                        controls-position="right"
                                    ></el-input-number>
                                </el-form-item>
                                <el-form-item
                                    label="时间格式"
                                    v-if="item.format"
                                >
                                    <el-select v-model="item.format">
                                        <el-option
                                            label="yyyy"
                                            value="yyyy"
                                        ></el-option>
                                        <el-option
                                            label="yyyyMM"
                                            value="yyyyMM"
                                        ></el-option>
                                        <el-option
                                            label="yyyyMMdd"
                                            value="yyyyMMdd"
                                        ></el-option>
                                        <el-option
                                            label="yyyy-MM-dd HH:mm"
                                            value="yyyy-MM-dd HH:mm"
                                        ></el-option>
                                        <el-option
                                            label="yyyy-MM-dd HH:mm:ss"
                                            value="yyyy-MM-dd HH:mm:ss"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item
                                    label="是否大小写"
                                    v-if="
                                        typeof item.upperCase == 'number'
                                            ? true
                                            : false
                                    "
                                >
                                    <el-radio-group v-model="item.upperCase">
                                        <el-radio :label="0">大写</el-radio>
                                        <el-radio :label="1">小写</el-radio>
                                        <el-radio :label="2">混合</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </div>
                        </div>

                        <!-- 常量的时候 -->
                        <div v-else-if="currentItem.ruleType == '2'">
                            <div class="currentdetails">
                                {{ currentItem.ruleValue }}
                            </div>
                        </div>
                        <!-- 系统类型的是系统的则是对象 -->
                        <div v-else>
                            <div class="currentdetails">
                                <el-form-item
                                    label="编码长度"
                                    v-if="
                                        typeof currentItem.ruleParam.size ==
                                        'number'
                                            ? true
                                            : false
                                    "
                                >
                                    <el-input-number
                                        v-model="currentItem.ruleParam.size"
                                        controls-position="right"
                                        :min="1"
                                    ></el-input-number>
                                </el-form-item>
                                <el-form-item
                                    label="填充值"
                                    v-if="
                                        typeof currentItem.ruleParam.fill ==
                                        'string'
                                            ? true
                                            : false
                                    "
                                >
                                    <el-select
                                        v-model="currentItem.ruleParam.fill"
                                        placeholder="请选择"
                                        clearable
                                    >
                                        <el-option
                                            label="0"
                                            value="0"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item
                                    label="流水号自增"
                                    v-if="
                                        typeof currentItem.ruleParam.step ==
                                        'number'
                                            ? true
                                            : false
                                    "
                                >
                                    <el-input-number
                                        v-model="currentItem.ruleParam.step"
                                        controls-position="right"
                                        :min="1"
                                    ></el-input-number>
                                </el-form-item>
                                <el-form-item
                                    label="最大值"
                                    v-if="
                                        typeof currentItem.ruleParam.max ==
                                        'number'
                                            ? true
                                            : false
                                    "
                                >
                                    <el-input-number
                                        v-model="currentItem.ruleParam.max"
                                        controls-position="right"
                                        :min="1"
                                    ></el-input-number>
                                </el-form-item>
                                <el-form-item
                                    label="最小值"
                                    v-if="
                                        typeof currentItem.ruleParam.min ==
                                        'number'
                                            ? true
                                            : false
                                    "
                                >
                                    <el-input-number
                                        v-model="currentItem.ruleParam.min"
                                        controls-position="right"
                                        :min="1"
                                    ></el-input-number>
                                </el-form-item>
                                <el-form-item
                                    label="时间格式"
                                    v-if="currentItem.ruleParam.format"
                                >
                                    <el-select
                                        v-model="currentItem.ruleParam.format"
                                    >
                                    
                                        <el-option
                                            label="yyyy"
                                            value="yyyy"
                                        ></el-option>
                                        <el-option
                                            label="yyyyMM"
                                            value="yyyyMM"
                                        ></el-option>
                                        <el-option
                                            label="yyyyMMdd"
                                            value="yyyyMMdd"
                                        ></el-option>
                                        <el-option
                                            label="yyyy-MM-dd HH:mm"
                                            value="yyyy-MM-dd HH:mm"
                                        ></el-option>
                                        <el-option
                                            label="yyyy-MM-dd HH:mm:ss"
                                            value="yyyy-MM-dd HH:mm:ss"
                                        ></el-option>
                                        <el-option
                                            label="yy-"
                                            value="syy"
                                        ></el-option>
                                        <el-option
                                            label="-yy"
                                            value="pyy"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item
                                    label="是否大小写"
                                    v-if="
                                        typeof currentItem.ruleParam
                                            .upperCase == 'number'
                                            ? true
                                            : false
                                    "
                                >
                                    <el-radio-group
                                        v-model="
                                            currentItem.ruleParam.upperCase
                                        "
                                    >
                                        <el-radio :label="0">大写</el-radio>
                                        <el-radio :label="1">小写</el-radio>
                                        <el-radio :label="2">混合</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </div>
                        </div>
                    </div>
                </div>
                <span v-if="show" style="color: red"
                    >请进行拖拽完整新的编码</span
                >
            </template>
        </VoSchemaForm>
        <div style="text-align: right; margin-right: 35px">
            <el-button @click="handleCancel">取消</el-button>
            <el-button @click="rowFunctionalTest(form)">预览</el-button>

            <el-button
                type="primary"
                @click="handleAddClick(form)"
                :loading="saveLoading"
            >
                确定
            </el-button>
        </div>
    </div>
</template>

<script>
import { saveGenerate, allGenerate, testGenerate } from '@/api/code/codeGeneration'
import VabDraggable from 'vuedraggable'
import { deepCopy } from '@/utils/deepCopy'
export default {

    data () {
        const isRuletype = (reule, value, callback) => {
            const reg = /^[0-9a-zA-Z:_-]{1,}$/
            if (reg.test(value)) {
                return callback()
            }
            callback(new Error('只允许输入字母或字母或者下划线_中划线-'))
        }
        return {
            form: {
                rulesSystem: [],
            },

            list1: [], //被拖拽后的数组
            falgs: 'article',
            disabled: false,
            visible: false,
            show: false,
            saveLoading: false, //按钮的加载
            initfalse: false,
            options: [],
            rulesofThesystem: [], //系统规则内的全部数据
            result: [],
            schema: {
                properties: {
                    name: {
                        label: '规则名称',
                        widget: 'input',
                        ui: {
                            placeholder: '请输入规则名称',
                        },
                        col: {
                            span: 11,
                        },
                    },
                    ruleCode: {
                        label: '规则标识',
                        widget: 'input',
                        ui: {
                            placeholder: '请输入规则标识',
                            disabled: false,
                        },
                        col: {
                            span: 11,
                        },
                    },
                    ruleType: {
                        label: '规则类型',
                        widget: 'radio',
                        enum: [
                            { value: '业务', label: '1' },
                            { value: '常量', label: '2' },
                            // { value: '系统', label: '0' },
                        ],
                        ui: {
                            disabled: false,
                        },

                        col: {
                            span: 22,
                        },
                    },
                    // 业务
                    rulesSystem: {
                        label: '系统规则',
                        widget: 'custom',
                        if (p) {
                            return p.ruleType === '1'
                        },
                        rules: [
                            {
                                required: true,
                                message: '请选择系统规则',
                                trigger: ['change', 'blur'],
                            },
                        ],
                        col: {
                            span: 22,
                        },
                    },

                    rulePlaceholder: {
                        label: '',
                        widget: 'custom',
                        if (p) {
                            return p.ruleType === '1'
                        },

                        col: {
                            span: 22,
                        },
                    },
                    // 系统
                    implementClass: {
                        label: '实现类',
                        widget: 'input',
                        ui: {
                            placeholder: '请输入实现类',
                        },
                        if (p) {
                            return p.ruleType === '0'
                        },
                        rules: [
                            {
                                required: true,
                                message: '请输入实现类',
                                trigger: ['blur', 'change'],
                            },
                        ],
                        col: {
                            span: 22,
                        },
                    },
                    // 常量
                    ruleValue: {
                        label: '常量值',
                        widget: 'input',
                        ui: {
                            placeholder: '请输入常量值',
                        },
                        if (p) {
                            return p.ruleType === '2'
                        },
                        rules: [
                            {
                                required: true,
                                message: '请输入常量值',
                                trigger: ['blur', 'change'],
                            },
                        ],
                        col: {
                            span: 22,
                        },
                    },
                },
                row: {
                    type: 'flex',
                    style: {
                        flexWrap: 'wrap',
                    },
                    gutter: 20,
                },
                ui: {
                    labelWidth: 110,
                    labelPosition: 'right',
                },
            },
            // 验证表单
            rules: {
                name: [
                    {
                        required: true,
                        message: '请输入规则名称',
                        trigger: ['blur', 'change'],
                    },
                    {
                        min: 2,
                        max: 12,
                        message: '长度在 2 到 12 个字符',
                        trigger: ['blur', 'change'],
                    },
                ],

                ruleCode: [
                    {
                        required: true,
                        message: '请输入规则标识',
                        trigger: ['blur', 'change'],
                    },
                    { validator: isRuletype, trigger: 'blur' },
                ],

                ruleType: [
                    {
                        required: true,
                        message: '请选择规则类型',
                        trigger: ['blur', 'change'],
                    },
                ],
            },
            ruleParamItem: [], //获取所有系统规则内
            a: [],
            systemcoding: [], //系统编码数据
            businesscoding: [], //业务编码数据
            constantcoding: [], //常量编码数据
            currentItem: {}, //当前点击的数据
            currentShow: false,
            nowIndex: '',
        }
    },
    components: {
        VabDraggable,
    },
    created () {
        this.nonpagingQuery()
    },

    methods: {
        end (ev) {
            if (this.list1 && this.list1.length === 6) {
                this.disabled = true
            } else {
                this.disabled = false
            }
            this.list1 = deepCopy(this.list1)
        },

        start22 (event) {
            this.falgs = '222222'
        },
        end22 (ev) {
            this.falgs = 'article'
        },

        handleDel (index, v) {
            this.$confirm(`确定要移除 ${v.name} , 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.list1.splice(index, 1)
                    this.currentItem = {}
                })
                .catch(() => { })
        },
        // 点击当前的
        nameClick (v, i) {
            if (v && this.list1.length !== 0) {
                this.nowIndex = i
                this.currentItem = v
                this.currentShow = true
            } else {
                this.currentItem = {}
            }
        },
        // 初始化
        init (params, options) {
            if (params) { 
                this.form = { ...params }
                this.schema.properties.ruleCode.ui.disabled = true
                this.schema.properties.ruleType.ui.disabled = true
                if (this.form.ruleParam) {
                    this.form.ruleParam = JSON.parse(this.form.ruleParam)
                }
                if (this.form.ruleType === '1') {
                    this.$set(this.form, 'rulesSystem', ['0'])
                    this.rulesSystemChange(this.form.rulesSystem)
                }
                
                if (this.form.ruleCode) {
                    this.rulesofThesystem = options
                    this.separated(this.form.rulePlaceholder)

                    this.form.rulePlaceholder.forEach((item) => {
                        this.rulesofThesystem.find((v) => {
                            if (item.name === v.ruleCode) {
                                this.list1.push(v)
                            }
                        })
                    })
                    this.list1 = deepCopy(this.list1)
                } else {
                    
                    this.form.rulePlaceholder = [{}]
                    
                }
            } else {
                let code= this.randomRuleCode(true, 3, 8)
                this.form = {
                    ruleType: '1',
                    rulesSystem: ['0'],
                    rulePlaceholder: [{}],
                    ruleCode: code
                }
                this.rulesSystemChange(this.form.rulesSystem)

                this.schema.properties.ruleCode.ui.disabled = false

                this.schema.properties.ruleType.ui.disabled = false
            }

            this.clearValidate()
        },
        randomRuleCode(randomFlag, min, max){
           let str = '',
            range = min,  // 默认赋值为第二个参数，如果是随机产生位数会通过下面的if改变。
            arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z','-','_'];
            // 随机产生
            if (randomFlag) {
                range = Math.round(Math.random() * (max - min)) + min;
            }
            for (let i = 0; i < range; i++) {
                let index = Math.round(Math.random() * (arr.length - 1));
                str += arr[index];
            }
            return str;
        },
        // 获取系统规则内的数据
        nonpagingQuery () {
            allGenerate().then((res) => {
                if (res.code === 0) {
                    this.rulesofThesystem = res.data || []
                    this.rulesofThesystem.forEach((item) => {
                        try {
                            item.ruleParam = JSON.parse(item.ruleParam)
                        } catch (error) { }
                        if (item.ruleType === '1') {
                            this.businesscoding.push(item)
                            // this.result = this.separatedData(this.businesscoding)
                        } else if (item.ruleType === '0') {
                            if (item.ruleType === '0') {
                                this.systemcoding.push(item)
                                this.result = this.separatedData(this.systemcoding)
                            }
                        } else if (item.ruleType === '2') {
                            this.constantcoding.push(item)
                            // this.result = this.separatedData(this.constantcoding)
                        }
                    })
                }
            })
        },
        // 分隔数组
        separatedData (v) {
            let nowresult = []
            for (let index = 0; index < v.length; index += 12) {
                nowresult.push(v.slice(index, index + 12))
            }
            return nowresult
        },
        // 系统规则的change事件
        rulesSystemChange (v) {
            let a = []
            if (v && v.length) {
                v.forEach((item) => {
                    this.rulesofThesystem.forEach((v) => {
                        if (item === v.ruleType) {
                            a.push(v)
                            this.result = this.separatedData(a)
                        }
                    })
                })
            } else {
                this.result = []
            }
        },
        // 新增确定
        handleAddClick (values) {
            this.$refs.sf.validate((valid) => {
                if (valid) {
                    let params = {
                        ...values,
                        privateOrg: values.privateOrg ? values.privateOrg : -1
                    }
                    params = this.convertJson(params)



                    if (params.ruleType === '1' && !params.ruleParam) {
                        return (this.show = true)
                    } else if (params.ruleType === '2') {
                        delete params.ruleParam
                        params.rulePlaceholder = ''
                        this.show = false
                    } else if (params.ruleType === '0') {
                        delete params.ruleParam
                        delete params.ruleValue
                        params.rulePlaceholder = ''
                        this.show = false
                    } else {
                        this.show = false
                    }
                    console.log(params, 'params')
                    this.saveLoading = true
                    saveGenerate(params)
                        .then((res) => {
                      
                            this.saveLoading = false
                            
                            if (res.code == 0) {
                                this.$message.success('操作成功')
                                this.$emit('cancel', this.initfalse)
                            } else {
                                this.$message.error('操作失败', 'error')
                            }
                        })
                        .catch(() => {
                            this.$message.error('操作失败', 'error')
                            this.saveLoading = false
                        })
                }
            })
        },
        // 转成json字符串
        convertJson (v) {
            let text = ''
            let a = []
            const element = []

            this.list1.forEach((item) => {
                element.push(item.ruleCode)
                if (item.ruleParam && !item.ruleParam.length) {
                    a.push(item.ruleParam)
                } else if (item.ruleParam && item.ruleParam.length !== 0) {
                    item.ruleParam.forEach((v) => {
                        a.push(v)
                    })
                }
                v.ruleParam = JSON.stringify(a)
            })

            for (let index = 0; index < element.length; index++) {
                let a = `{${element[index]}}`
                text += a
            }

            v.rulePlaceholder = text
            return v
        },
        // 预览
        rowFunctionalTest (values) {
            this.$refs.sf.validate((valid) => {
                if (valid) {
                    let params = {
                        ...values,
                    }

                    let text = ''
                    let a = []
                    const element = []

                    // ruleParam
                    this.list1.forEach((item) => {
                        element.push(item.ruleCode)
                        if (item.ruleParam && !item.ruleParam.length) {
                            a.push(item.ruleParam)
                        } else if (item.ruleParam && item.ruleParam.length !== 0) {
                            item.ruleParam.forEach((v) => {
                                a.push(v)
                            })
                        }
                        params.ruleParam = JSON.stringify(a)
                    })
                    // rulePlaceholder
                    for (let index = 0; index < element.length; index++) {
                        let a = `{${element[index]}}`
                        text += a
                    }
                    params.rulePlaceholder = text
                    // 提示

                    if (params.ruleType === '1' && !params.ruleParam) {
                        return (this.show = true)
                    } else if (params.ruleType === '2') {
                        delete params.ruleParam
                        params.rulePlaceholder = ''
                        this.show = false
                    } else if (params.ruleType === '0') {
                        delete params.ruleParam
                        delete params.ruleValue
                        params.rulePlaceholder = ''
                        this.show = false
                    } else {
                        this.show = false
                    }

                    testGenerate(params)
                        .then((res) => {
                            if (res.code === 0) {
                                this.$alert(
                                    `<div >

                    <h4 style="margin-bottom: 10px">生成结果：</h4>
                     <p style="width: 380px;word-wrap: break-word"> ${res.data}</p>
                     </div>`,

                                    {
                                        dangerouslyUseHTMLString: true,
                                        confirmButtonText: '取消',
                                    }
                                )
                            }
                        })
                        .catch(() => { })
                }
            })
        },
        separated (v) {
            const getList = (v) => {
                const result = []
                if (v && typeof v === 'string') {
                    const list1 = v.split(/\{/)
                    list1.forEach((s) => {
                        if (s) {
                            const t = s.split(/\}/)

                            const start = t[0] || ''
                            const end = t[1] || ''
                            const startList = start.split(':')
                            result.push({
                                name: startList[0] || '',
                                // pattern: startList[1] ? +startList[1] : null,
                                // message: startList[2] || '',
                                value: end,
                            })
                        }
                    })
                }
                return result
            }
            this.form.rulePlaceholder = getList(v)
        },

        // 关闭弹框
        handleCancel () {
            this.options = []
            this.nowIndex = ''
            this.$emit('cancel', false)
        },
        // 移除表单项的校验结果
        clearValidate () {
            this.$nextTick(() => {
                if (this.$refs.sf) {
                    this.$refs.sf.clearValidate()
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.rulessystem {
    .rulessystemcode {
        text-align: center;

        .codingregion {
            border: 1px solid #303133;
            background-color: #e6eaf3;
            cursor: pointer;
            margin: 5px 0;
            padding: 0 10px;
            position: relative;
            transition: all 1s;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }
}
.bottomregions {
    overflow: hidden;
    border: 1px solid #e9e9e9;
    padding: 0 5px;
    .codingregion2 {
        text-align: center;
        cursor: pointer;
        border: 1px solid #dee1e6;
        margin: 5px 0;
        padding: 0 10px;
        position: relative;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        &.is_active {
            color: rgb(64, 158, 255);
        }
    }
    i {
        cursor: pointer;
        position: absolute;
        top: -5px;
        right: 0;
        color: red;
    }
    .datafielddetails {
        width: 100%;
        margin-top: 10px;
        p {
            border-left: 3px solid #1890ff;
            width: 50%;
            margin-bottom: 15px;
            margin-left: 5px;
            padding-left: 10px;
        }
        .currentdetails {
            display: flex;
            flex-flow: wrap;
            width: 100%;
            margin-left: 5px;
            padding-left: 10px;
        }
    }
}

.undraggable {
    background-color: #303133;
}

::v-deep(.el-form-item__label) {
        width: 80px !important;
}

::v-deep(.el-form-item__content) {
        margin-left: 80px !important;
    }
</style>
